<template>
	<view class="container">
		<view class="header">
			<image src='../../../static/chedui/zuojiantou.png'></image>
			<text class="title">选择车队</text>
			<view><text class="subtitle">提示：专属业务，仅被指定分组的车辆可以接单</text></view>
		</view>

		<!-- 车队列表 -->
		<scroll-view scroll-y="true" class="team-list">
			<checkbox-group @change="handleTeamSelect">
				<label class="team-item" v-for="(team, index) in teamList" :key="index">
					<view class="team-info">
						<image src="../../../static/chedui/car.png"></image>
						<view class="team-details">
							<text class="team-name">{{team.leader}}的{{team.number}}号车队</text>
							<text class="team-count">{{team.carCount}}辆车</text>
						</view>
						<checkbox :value="team.id" :checked="team.checked" />
					</view>
				</label>
			</checkbox-group>
		</scroll-view>

		<!-- 底部操作栏 -->
		<view class="footer">
			<view class="selection-info">
				<text>已选{{selectedCount}}个车队</text>
			</view>
			<view class="action-buttons">
				<view class="select-all-btn" @click="toggleSelectAll">{{isAllSelected ? '取消全选' : '全选'}}</view>
				<button class="confirm-btn" @click="confirmSelection">确定</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue'

	const teamList = ref([{
			id: '1',
			leader: '张三',
			number: '1',
			carCount: 8,
			checked: false
		},
		{
			id: '2',
			leader: '张三',
			number: '2',
			carCount: 10,
			checked: false
		},
		{
			id: '3',
			leader: '赵六',
			number: '1',
			carCount: 10,
			checked: false
		},
		{
			id: '4',
			leader: '张三',
			number: '1',
			carCount: 8,
			checked: false
		},
		{
			id: '5',
			leader: '张三',
			number: '2',
			carCount: 10,
			checked: false
		},
		{
			id: '6',
			leader: '赵六',
			number: '1',
			carCount: 10,
			checked: false
		},
		{
			id: '7',
			leader: '张三',
			number: '1',
			carCount: 8,
			checked: false
		},
		{
			id: '8',
			leader: '张三',
			number: '2',
			carCount: 10,
			checked: false
		},
		{
			id: '8',
			leader: '张三',
			number: '2',
			carCount: 10,
			checked: false
		},
		{
			id: '8',
			leader: '张三',
			number: '2',
			carCount: 10,
			checked: false
		},
		{
			id: '8',
			leader: '张三',
			number: '2',
			carCount: 10,
			checked: false
		},
		{
			id: '8',
			leader: '张三',
			number: '2',
			carCount: 10,
			checked: false
		}
	])

	const isAllSelected = ref(false)

	const selectedCount = computed(() => {
		return teamList.value.filter(team => team.checked).length
	})

	const handleTeamSelect = (e) => {
		const selectedIds = e.detail.value
		teamList.value.forEach(team => {
			team.checked = selectedIds.includes(team.id)
		})
		checkAllSelected()
	}

	const toggleSelectAll = () => {
		isAllSelected.value = !isAllSelected.value
		teamList.value.forEach(team => {
			team.checked = isAllSelected.value
		})
	}

	const checkAllSelected = () => {
		isAllSelected.value = teamList.value.every(team => team.checked)
	}

	const confirmSelection = () => {
		const selectedTeams = teamList.value.filter(team => team.checked)

		if (selectedTeams.length === 0) {
			uni.showToast({
				title: '请至少选择1个车队',
				icon: 'none'
			})
			return
		}
		uni.showToast({
			title: `已选择${selectedTeams.length}个车队`,
			icon: 'success'
		})

		//车队的数据
		console.log('选中的车队:', selectedTeams)
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f5f5;
	}

	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #002fa7;
	}

	.header {
		height: 80rpx;
		width: 100%;
		padding: 40rpx 0 30rpx;
		background-color: #002fa7;
		margin-left: 0px;
	}

	.header image {
		margin-left: 25rpx;
		width: 30rpx;
		height: 30rpx;
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		line-height: 50rpx;
		color: #ffffff;
	}

	.subtitle {
		margin-left: 53rpx;
		font-size: 24rpx;
		color: #ffffff;
		line-height: 40rpx;
	}

	.team-list {
		flex: 1;
		background-color: #f5f5f5;
		border-radius: 25rpx 25rpx 0 0 ;
	}

	.team-item {
		display: block;
		padding: 25rpx 0;
		width: 93%;
		height: 60%;
		border-radius: 30rpx;
		margin-top: 20rpx;
		margin-left: 30rpx;
		background-color: #ffffff;
	}

	.team-item image {
		margin-left: 30rpx;
	}

	.team-info {
		display: flex;
		align-items: center;
	}

	.team-info image {
		width: 50rpx;
		height: 50rpx;
	}

	.team-details {
		flex: 1;
		margin-left: 20rpx;

	}

	.team-name {
		font-size: 30rpx;
		color: #333;
		display: block;
		line-height: 45rpx;
	}

	.team-count {
		font-size: 24rpx;
		color: #999;
		display: block;
		line-height: 35rpx;
	}

	.footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 15rpx 30rpx;
		background-color: #fff;
		border-top: 1rpx solid #eee;
	}

	.selection-info {
		font-size: 28rpx;
		color: #666;
	}
	.action-buttons {
		display: flex;
	}

	.select-all-btn {
		margin-right: 20rpx;
		color: #002fa7;
		font-size: 28rpx;
		height: 70rpx;
		line-height: 70rpx;
		padding: 0 50rpx;
	}

	.confirm-btn {
		background-color: #002fa7;
		color: white;
		font-size: 28rpx;
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 20rpx;
		padding: 0 40rpx;
	}

	/* 复选框样式调整 */
	checkbox .wx-checkbox-input {
		width: 30rpx;
		height: 30rpx;
		margin-right:35rpx;
		}

	checkbox .wx-checkbox-input.wx-checkbox-input-checked {
		background: #1382fc;
		border-color: #1382fc;
	}
</style>